<template>
  <!-- 商品组 -->
  <view class="diy-goods" :style="{ background: itemStyle.background }">
    <view
      class="goods-list"
      :class="[`display__${itemStyle.display}`, `column__${itemStyle.column}`]"
    >
      <scroll-view :scroll-x="itemStyle.display === 'slide'">
        <view
          class="goods-item"
          v-for="(dataItem, index) in dataList"
          :key="index"
        >
          <!-- 单列商品 -->
          <block v-if="itemStyle.column === 1">
            <view class="dis-flex">
              <!-- 商品图片 -->
              <view class="goods-item_left">
                <image class="image" :src="dataItem.goods_image"></image>
              </view>
              <view class="goods-item_right">
                <!-- 商品名称 -->
                <view
                  v-if="itemStyle.show.includes('goodsName')"
                  class="goods-name twoline-hide"
                >
                  <text>{{ dataItem.goods_name }}</text>
                </view>
                <view class="goods-item_desc">
                  <!-- 商品卖点 -->
                  <view
                    v-if="itemStyle.show.includes('sellingPoint')"
                    class="desc-selling_point dis-flex"
                  >
                    <text class="oneline-hide">{{
                      dataItem.selling_point
                    }}</text>
                  </view>
                  <!-- 商品销量 -->
                  <view
                    v-if="itemStyle.show.includes('goodsSales')"
                    class="desc-goods_sales dis-flex"
                  >
                    <text>已售{{ dataItem.goods_sales }}件</text>
                  </view>
                  <!-- 商品价格 -->
                  <view class="desc_footer">
                    <text
                      v-if="itemStyle.show.includes('goodsPrice')"
                      class="price_x"
                      >¥{{ dataItem.goods_price_min }}</text
                    >
                    <text
                      class="price_y col-9"
                      v-if="
                        itemStyle.show.includes('linePrice') &&
                        dataItem.line_price_min > 0
                      "
                      >¥{{ dataItem.line_price_min }}</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </block>
          <!-- 多列商品 -->
          <block v-else>
            <!-- 商品图片 -->
            <view class="goods-image">
              <image
                class="image"
                mode="aspectFill"
                :src="dataItem.goods_image"
              ></image>
            </view>
            <view class="detail">
              <!-- 商品标题 -->
              <view
                v-if="itemStyle.show.includes('goodsName')"
                class="goods-name twoline-hide"
              >
                {{ dataItem.goods_name }}
              </view>
              <!-- 商品价格1 -->
              <view class="detail-price oneline-hide">
                <text
                  v-if="itemStyle.show.includes('goodsPrice')"
                  class="goods-price f-30 col-m"
                  >￥{{ dataItem.goods_price_min }}</text
                >
                <text
                  v-if="
                    itemStyle.show.includes('linePrice') &&
                    dataItem.line_price_min > 0
                  "
                  class="line-price col-9 f-24"
                  >￥{{ dataItem.line_price_min }}</text
                >

                <text class="user-grade">提货价</text>
                <u-icon
                  size="40"
                  name="/static/tabbar/cart.png"
                  @click="onShowSkuPopup(2, dataItem.goods_id)"
                ></u-icon>
              </view>

              <!-- 操作按钮 -->
              <view class="foo-item-btn">
                <view class="btn-wrapper">
                  <!-- <view class="btn-item btn-item-deputy" @click="onShowSkuPopup(2,dataItem.goods_id)">
			        <text>加入提货篮</text>
			      </view> -->
                  <!-- <view class="btn-item btn-item-main" @click="onShowSkuPopup(3)">
			        <text>立即购买</text>
			      </view> -->
                </view>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
      <!-- 商品SKU弹窗 -->
      <SkuPopup
        v-if="!isLoading"
        v-model="showSkuPopup"
        :skuMode="skuMode"
        :goods="goods"
        @addCart="onAddCart"
      />
    </view>
  </view>
</template>

<script>
import SkuPopup from "@/pages/goods/components/SkuPopup";
import * as GoodsApi from "@/api/goods";
export default {
  name: "Goods",
  components: {
    SkuPopup,
  },
  data() {
    return {
      // 正在加载
      isLoading: true,
      // 显示/隐藏SKU弹窗
      showSkuPopup: false,
      // 模式 1:都显示 2:只显示购物车 3:只显示立即购买
      skuMode: 1,
      // 购物车总数量
      cartTotal: 0,
      goods: {},
    };
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    itemIndex: String,
    itemStyle: Object,
    params: Object,
    dataList: Array,
  },
  onLoad(options) {},

  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    // 更新购物车数量
    onAddCart(total) {
      this.cartTotal = total;
    },
    /**
     * 显示/隐藏SKU弹窗
     * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
     */
    onShowSkuPopup(skuMode = 1, goodsId) {
      this.getGoodsDetail((skuMode = 2), goodsId);
      // this.skuMode = skuMode
      // this.showSkuPopup = !this.showSkuPopup
    },
    // 获取商品信息
    getGoodsDetail(skuMode = 1, goodsId) {
      const app = this;
      app.isLoading = true;
      return new Promise((resolve, reject) => {
        GoodsApi.detail(goodsId)
          .then((result) => {
            app.goods = result.data.detail;
            app.skuMode = skuMode;
            app.showSkuPopup = !app.showSkuPopup;
            resolve(result);
            app.isLoading = false;
          })
          .catch(() => {
            app.isLoading = false;
            reject();
          });
      });
    },
    /**
     * 跳转商品详情页
     */
    onTargetGoods(goodsId) {
      this.$navTo(`pages/goods/detail`, { goodsId });
    },
  },
};
</script>

<style lang="scss" scoped>
// 操作按钮
.foo-item-btn {
  flex: 1;

  .btn-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .btn-item {
    flex: 1;
    font-size: 28rpx;
    height: 72rpx;
    margin-right: 16rpx;
    color: #fff;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 立即购买按钮
  .btn-item-main {
    background: linear-gradient(to right, #f9211c, #ff6335);
  }

  // 购物车按钮
  .btn-item-deputy {
    background: linear-gradient(to right, #ffa600, #ffbb00);
  }
}
// 会员价标签
.user-grade {
  background: #3c3c3c;
  border-radius: 6rpx;
  padding: 8rpx 14rpx;
  margin-right: 15rpx;
  font-size: 24rpx;
  color: #eee0c3;
}
.diy-goods {
  .goods-list {
    padding: 4rpx;
    box-sizing: border-box;

    .goods-item {
      box-sizing: border-box;
      padding: 6rpx;

      .goods-image {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        overflow: hidden;
        background: #fff;

        &:after {
          content: "";
          display: block;
          margin-top: 100%;
        }

        .image {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          -o-object-fit: cover;
          object-fit: cover;
        }
      }

      .detail {
        padding: 8rpx;
        background: #fff;

        .goods-name {
          height: 64rpx;
          line-height: 1.3;
          white-space: normal;
          color: #484848;
          font-size: 26rpx;
        }

        .detail-price {
          display: flex;
          align-items: center;
          .goods-price {
            margin-right: 8rpx;
          }

          .line-price {
            text-decoration: line-through;
          }
        }
      }
    }

    &.display__slide {
      white-space: nowrap;
      font-size: 0;

      .goods-item {
        display: inline-block;
      }
    }

    &.display__list {
      .goods-item {
        float: left;
      }
    }

    &.column__2 {
      .goods-item {
        width: 50%;
      }
    }

    &.column__3 {
      .goods-item {
        width: 33.33333%;
      }
    }

    &.column__1 {
      .goods-item {
        width: 100%;
        height: 280rpx;
        margin-bottom: 12rpx;
        padding: 20rpx;
        box-sizing: border-box;
        background: #fff;
        line-height: 1.6;

        &:last-child {
          margin-bottom: 0;
        }
      }

      .goods-item_left {
        display: flex;
        width: 40%;
        background: #fff;
        align-items: center;

        .image {
          display: block;
          width: 240rpx;
          height: 240rpx;
        }
      }

      .goods-item_right {
        position: relative;
        width: 60%;

        .goods-name {
          margin-top: 20rpx;
          height: 64rpx;
          line-height: 1.3;
          white-space: normal;
          color: #484848;
          font-size: 26rpx;
        }
      }

      .goods-item_desc {
        margin-top: 8rpx;
      }

      .desc-selling_point {
        width: 400rpx;
        font-size: 24rpx;
        color: #e49a3d;
      }

      .desc-goods_sales {
        color: #999;
        font-size: 24rpx;
      }

      .desc_footer {
        font-size: 24rpx;

        .price_x {
          margin-right: 16rpx;
          color: #f03c3c;
          font-size: 30rpx;
        }

        .price_y {
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
